<template>
    <!-- 模态框 -->
    <div class="model">
        <!-- 遮罩层 -->
        <div class="mask" @click="isshowmodel(false)"></div>

        <!-- 登录框 -->
        <div class="login">
            <!-- 关闭按钮 -->
            <div class="shut-down" @click="isshowmodel(false)"></div>
            <!-- 导航 -->
            <section class="nav">
                <a href="#" :class="{ active: inshow }" @click="inshow = true">手机号登录</a>
                <span>|</span>
                <a href="#" :class="{ active: !inshow }" @click="showQr">微信扫码登录</a>
            </section>

            <!-- 内容 -->
            <div class="content">
                <!-- 手机登录内容 -->
                <div v-show="inshow" class="phonelogin">
                    <div class="row">
                        <input type="text" placeholder="请输入手机号" class="ipt" v-model="phoneNumber">
                    </div>
                    <div class="row">
                        <slide-verify :l="42" :r="20" :w="362" :h="140" :imgs="arr" @success="onSuccess" @fail="onFail"
                            @refresh="onRefresh" :style="{ width: '100%' }" class="slide-box" ref="slideBlock"
                            :slider-text="msg"></slide-verify>
                    </div>
                    <div class="row">
                        <input type="text" placeholder="请输入验证码" class="ipt" v-model="code">
                        <button class="btncode" v-show="!showCount" @click="getcode">获取验证码</button>
                        <button class="btncode" v-show="showCount">{{ count }}s</button>
                    </div>
                    <div class="row">

                        <button class="btnlogin" @click="submitFn()">登录</button>
                    </div>
                </div>
                <!-- 微信登录内容 -->
                <div v-show="!inshow" id="weixin">
                    微信扫码内容
                </div>
            </div>

        </div>
    </div>
</template>

<script>

import { mapMutations, mapActions } from 'vuex';
import { sendSMSAPT, PhoneReginAPT, BindingAPT } from "@/request/api"
import { valdatePhone } from "@/Utils/index"
export default {
    data() {
        return {
            inshow: true,
            msg: "向右滑动",
            arr: [
                require('../assets/img/integral-01.9386d4bf.png'),
                require('../assets/img/integral-02.150d92a1.png'),
                require('../assets/img/integral-03.9870f3f1.png')
            ],
            // 是否显示倒计时
            showCount: false,
            // 手机号
            phoneNumber: "",
            // 倒计时时间
            count: 5,
            // 验证码非空校验
            code: ""
        };
    },
    methods: {
        ...mapMutations({
            // 关闭模态框
            isshowmodel: "showModal/changeIsShowLoginModel",
            // 购物车和登录切换
            changeIsisLogined: "isLogined/changeIsisLogined",
            // 状态框
            // changeIsShowToast: "isShowToast/changeIsShowToast"
        }),
        ...mapActions({
            // 状态框
            asynChangeIsShowToast: "isShowToast/asynChangeIsShowToast",
            // 用户信息
            asyncChangeUserInfo: "userInfo/asyncChangeUserInfo"
        }),
        // 拼图成功
        onSuccess(times) {
            let ms = (times / 1000).toFixed(1);
            this.msg = "login success, 耗时 " + ms + "s";
        },
        // 拼图失败
        onFail() {
            this.onRefresh(); // 重新刷新拼图
        },
        // 拼图刷新
        onRefresh() {
            this.msg = "再试一次";
        },
        // 倒计时方法
        daojishi() {
            this.showCount = true
            let timer = setInterval(() => {
                this.count--
                if (this.count <= 0) {
                    this.count = 5
                    // 停止clear
                    clearInterval(timer)
                    this.showCount = false
                }
            }, 1000)
        },
        // 校验手机号和滑块的方法
        toVerify() {
            // let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
            // 调用工具包的方法
            if (!valdatePhone(this.phoneNumber)) {
                // alert("请输入正确号码")
                // 调用提示框方法

                // this.changeIsShowToast({
                //     inshow: true,
                //     msg: "输入正确号码",
                //     type: "success"

                // })
                // // 过2秒清除
                // let time = setTimeout(() => {
                //     this.changeIsShowToast({
                //         inShow: false,
                //     })
                //     clearTimeout(time)
                // }, 1500)

                this.asynChangeIsShowToast({
                    inshow: true,
                    msg: "输入正确号码",
                    type: "warning"
                })
                return
            }
            // 2,在判断滑块是否完成
            if (this.msg == "再试一次" || this.msg == "向右滑动") {
                // alert("请活动模块")
                this.asynChangeIsShowToast({
                    inshow: true,
                    msg: "请活动模块",
                    type: "warning"
                })
                return
            }
            // 函数默认返回值是undefinded
            return true
        },
        //  获取验证码
        // 1先判断 手机号码是否正确 正则
        async getcode() {
            // // let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
            // // 调用工具包的方法
            // if (!valdatePhone(this.phoneNumber)) {
            //     return alert("请输入正确号码")
            // }
            // // 2,在判断滑块是否完成
            // if (this.msg == "再试一次" || this.msg == "向右滑动") {
            //     return alert("请活动模块")
            // }

            // 调用手机号和滑块方法,如果没有通过就停止
            if (!this.toVerify()) return

            // 发送请求 然后倒计时
            let res = await sendSMSAPT({
                phone: this.phoneNumber
            })
            console.log(res);
            // 然后倒计时
            // 统一处理接口访问出错的提示
            // if (res.data.code == 0) {   
            if (!res) return //如果是统一接口是!=0 返回undefined 取反是真 直接return 否则直接返回真,取反,不执行return 
            // alert("发送成功")
            this.asynChangeIsShowToast({
                inshow: true,
                msg: "发送成功",
                type: "success"
            })
            // this.showCount = true
            // let timer = setInterval(() => {
            //     this.count--
            //     if (this.count <= 0) {
            //         this.count = 5
            //         // 停止clear
            //         clearInterval(timer)
            //         this.showCount = false
            //     }
            // }, 1000)

            // 调用倒计时方法
            this.daojishi()
            // }
        },



        // 登录
        async submitFn() {
            // 如果当前msg是"再试一次" 或者是 "向右滑动" 就提示从新开始滑块
            // if (this.msg == "再试一次" || this.msg == "向右滑动") {
            //     return alert("请活动模块")
            // }
            // 1手机号和滑块验证
            if (!this.toVerify()) return
            // 2短信验证码 非空校验
            if (this.code.trim() == "") {
                // alert("请输入验证码")
                // 调用提示框方法
                this.asynChangeIsShowToast({
                    inshow: true,
                    msg: "请输入验证码",
                    type: "warning"
                })
                return
            }
            // 3发起请求 两种情况,如果有uuid 就关联微信,如果没有就普通的手机验证登录
            let res = null
            let uuid = localStorage.getItem("uuid")

            if (uuid) {
                res = await BindingAPT({
                    verifyCode: this.code,
                    phone: this.phoneNumber,
                    uuid
                })
            } else {
                res = await PhoneReginAPT({
                    verifyCode: this.code,
                    phone: this.phoneNumber
                })
            }
            console.log(res);
            if (!res) return
            // 当登录成功后
            // 1提示登录成功
            // alert("登录成功")
            this.asynChangeIsShowToast({
                inshow: true,
                msg: "发送成功",
                type: "success"
            })
            // 2存储token
            localStorage.setItem("x-auth-token", res.data["x-auth-token"])
            // 3关闭模态框
            this.isshowmodel(false)
            // 4topbar购物车和登录切换 (修改vuex中isLogined的值)
            this.changeIsisLogined(true)

            // 清除code
            uuid && this.$router.push(this.$route.path)

            // 删除uuid
            localStorage.removeItem("uuid")

            // 手机登录-调用用户信息方法
            this.asyncChangeUserInfo()

        },
        // 点击微信扫码 
        showQr() {
            this.inshow = false
            // 获取二维码 并展示
            // 申请微信登录二维码
            let _this = this;
            new WxLogin({
                id: "weixin",
                appid: "wx67cfaf9e3ad31a0d", // 这个appid要填死
                scope: "snsapi_login",
                // 扫码成功后重定向的接口
                redirect_uri: "https://sc.wolfcode.cn/cms/wechatUsers/shop/PC",
                // state填写编码后的url
                state: encodeURIComponent(
                    window.btoa("http://127.0.0.1:8080" + _this.$route.path)
                ),
                // 调用样式文件
                href: "data:text/css;base64,Lyogd3hsb2dpbi5jc3MgKi8NCi5pbXBvd2VyQm94IC50aXRsZSwgLmltcG93ZXJCb3ggLmluZm97DQogIGRpc3BsYXk6IG5vbmU7DQp9DQoNCi5pbXBvd2VyQm94IC5xcmNvZGV7DQogIG1hcmdpbi10b3A6IDIwcHg7DQp9",
            });
        }
    },
};
</script>

<style lang="less" scoped>
.model {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;

    .mask {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .5);
    }

    .login {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 555px;
        height: 423px;
        background: url("@/assets/img/login-box-bg.png");
        text-align: center;

        .shut-down {

            width: 22px;
            height: 22px;
            position: absolute;
            right: 60px;
            top: 18px;
            font-size: 40px;
            background: url(@/assets/img/close.png);
        }

        .nav {
            margin-top: 40px;
            font-size: 20px;

            span {
                margin: 0 10px;
            }

            a {
                text-decoration: none;
                color: #000;
            }

            .active {
                color: red;
            }

        }

        .content {
            width: 350px;
            height: 200px;
            margin: 10px auto;
            // background-color: pink;

            .row {
                display: flex;
                margin-bottom: 20px;

                .ipt {
                    height: 50px;
                    outline: none;
                    flex: 1;
                    text-indent: 1em;
                }

                .btncode {
                    background-color: #0a328e;
                    color: #fff;
                    margin-left: 10px;
                    border: none;
                    width: 80px;
                }

                .btnlogin {
                    width: 100%;
                    background-color: #0a328e;
                    color: #fff;
                    height: 50px;
                    border: none;
                }
            }
        }
    }
}

/deep/.slide-box {
    width: 100%;
    position: relative;
    box-sizing: border-box;

    canvas {
        position: absolute;
        left: 0;
        top: -120px;
        display: none;
        width: 100%;
        box-sizing: border-box;
    }

    .slide-verify-block {
        width: 85px;
        height: 136px;
    }

    .slide-verify-refresh-icon {
        top: -120px;
        display: none;
    }

    &:hover {
        canvas {
            display: block;
        }

        .slide-verify-refresh-icon {
            display: block;
        }
    }
}
</style>